<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹窗UI测试</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/dialog.css">
</head>
	
	<style>
		body,html{
			/*display: flex;
			justify-content: center;
			align-items: center;*/
		}

		.div-testDialog{
			width: 500px;
			height: auto;
			margin: 50px auto;
		}

		.div-testDialog button{
			margin:  10px;
		}
		@media screen and ( max-width: 460px){
			.div-testDialog{
				width: 90%;
			}
		}
	</style>

<body>
	<div class="div-testDialog">
		<button class="dw-btn has-hover disabled input-reverse-tofull" onclick="javascript:$('body').dialog({type:'defalut'})">默认的弹窗</button>
		<button class="dw-btn btn-success has-hover" onclick="javascript:$('body').dialog({type:'success'})">success</button>
		<button class="dw-btn btn-primary has-hover" onclick="javascript:$('body').dialog({type:'primary'})">primary</button>
		<button class="dw-btn btn-danger has-hover" onclick="javascript:$('body').dialog({type:'danger'})">danger</button>
		<button class="dw-btn btn-warning has-hover" onclick="javascript:$('body').dialog({type:'warning'})">warning</button>

		<button class="dw-btn btn-success has-hover" onclick="javascript:$('body').dialog({type:'success',maskBg:'rgba(88,11,22,0.5)'})">可设置mask背景色</button>

		<button class="dw-btn btn-danger has-hover" onclick="javascript:$('body').dialog({type:'danger',title:'震惊!!!.',discription:'WE小组赛战胜了SKT,卢兮夜单杀两次瓜皮,心疼一波!'})">自定义文案 title,discription</button>

		<button class="dw-btn btn-danger has-hover" onclick="javascript:$('body').dialog({type:'danger',title:'错误.',discription:'听说昨晚WE战胜了SKT!!!你知道晚WE战胜了SKT!!!你知道吗?',isInput:true},function(ret) {if(ret.index===0){alert('你点击的是第'+ret.index+'个按钮,状态:'+ret.input.status+';输入的值为:'+ret.input.value)};})">点击之后的回调函数</button>

		<button class="dw-btn has-hover disabled input-reverse-tofull" onclick="javascript:$('body').dialog({type:'defalut',showBoxShadow:true})">box-shadow</button>
		<button class="dw-btn btn-success has-hover" onclick="javascript:$('body').dialog({type:'success',showBoxShadow:true,maskBg:'#fff'})">box-shadow</button>
		<button class="dw-btn btn-primary has-hover" onclick="javascript:$('body').dialog({type:'primary',showBoxShadow:true,maskBg:'#fff'})">box-shadow</button>

		<button class="dw-btn btn-primary has-hover" onclick="javascript:$('body').dialog({type:'primary',showBoxShadow:true,duration:0})">无进入动画</button>

		<button class="dw-btn btn-warning has-hover" onclick="javascript:$('body').dialog({type:'warning',showBoxShadow:true,duration:0,buttons:[{name: '确定',className: 'defalut'}],discription:'也许有点问题!'})">单个按钮</button>

		<button class="dw-btn btn-warning has-hover" onclick="javascript:$('body').dialog({type:'warning',showBoxShadow:true,duration:0,buttons:[{name: '确定',className: 'reverse'}]})">反色按钮效果</button>

		<button class="dw-btn btn-primary has-hover" onclick="javascript:$('body').dialog({type:'primary',showBoxShadow:true,buttons:[{name: '确定',className: 'defalut'}],discription:'也许有点问题!',animateIn:'rotateInUpLeft-hastrans',animateOut:'rotateOutUpLeft-hastrans'})">animate动画效果zoomIn-hastrans</button>

		<button class="dw-btn btn-success has-hover" onclick="javascript:$('body').dialog({type:'success',showBoxShadow:true,duration:0,buttons:[{name: '确定',className: 'false'}],discription:'也许有点问题!',buttonsSameWidth:true})">单个按钮100%宽度</button>
		<button class="dw-btn btn-danger has-hover" onclick="javascript:$('body').dialog({width:400,type:'danger',title:'good good study!!!.',discription:'希望你能好好学习  天天向上',buttonsSameWidth:true,buttons:[{name: '我一定好好学',className: 'defalut'},{name: '来来来一起开黑',className: 'reverse'}]})">点击回调 + 两个按钮宽度相等的效果</button>
		<button class="dw-btn btn-success has-hover" onclick="javascript:$('body').dialog({type:'success',showBoxShadow:true,duration:0,buttons:[{name: '确定',className: 'false'}],discription:'这个是针对如果有第三个选项的按钮   把取消效果放在右上方!',buttonsSameWidth:true,discriptionFontSize:'14px',showCloseIcon:true})">多一个关闭按钮</button>

		<button class="dw-btn btn-primary has-hover" onclick="javascript:$('body').dialog({type:'primary',showBoxShadow:true,buttons:[{name: '确定',className: 'defalut'}],discription:'也许有点问题!',animateIn:'fadeInRight-hastrans',animateOut:'fadeOutRight-hastrans'})">animate动画效果fadeInRight-hastrans</button>
	</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/dialog.js"></script>
</html>